<template>
	<view class="search">
		<music-head title="搜索" :showIcon="true" fontColor="black" :top="menuButtonInfo.top"></music-head>

		<view class="scroll-box">
			<scroll-view scroll-y="true">
				<view class="search-search">
					<text class="iconfont iconsearch"></text>
					<input :focus="searchIpt" type="text" placeholder="搜索歌曲" v-model="searchKey" @confirm="toSearch" @input="searchInput" />
					<text class="iconfont iconguanbi" v-show="searchKey" @tap="clearSearch"></text>
				</view>

				<block v-if="showType === 1">
					<view class="search-history">
						<view class="history-head">
							<text>历史记录</text>
							<text class="iconfont iconlajitong" @tap="clearHistory"></text>
						</view>
						<view class="history-list">
							<view v-for="(item, index) in searchHistory" :key="index" @tap="toSearchHandle(item)">{{ item }}</view>
						</view>
					</view>

					<view class="search-hot">
						<view class="hot-title">热搜榜</view>
						<view class="hot-item" v-for="(item, index) in hotSearchList" :key="item.searchWord" @tap="toSearchHandle(item.searchWord)">
							<view class="hot-top">{{ index + 1 }}</view>
							<view class="hot-content">
								<view>
									{{ item.searchWord }}
									<image :src="item.iconUrl" mode="aspectFit"></image>
								</view>
								<view>{{ item.content }}</view>
							</view>
							<text class="hot-count">{{ item.score | formatNum }}</text>
						</view>
					</view>
				</block>

				<block v-else-if="showType === 2">
					<view class="search-result">
						<view class="result-item" v-for="(item, index) in searchResultList" :key="index" @tap="toPlayMusic(item.id)">
							<view class="item-content">
								<view>{{ item.name }}</view>
								<view>
									<text v-for="(itm, idx) in item.artists" :key="itm.id">{{ itm.name }}{{ idx + 1 === item.artists.length ? ' ' : '/' }}</text>
									-
									<text>{{ item.album.name }}</text>
								</view>
							</view>
							<text class="iconfont iconbofang"></text>
						</view>
					</view>
				</block>

				<block v-else-if="showType === 3">
					<view class="search-suggest">
						<view class="suggest-title">搜索{{ '"' + searchKey + '"' }}</view>
						<view class="suggest-item" v-for="(item, index) in suggestList" :key="index" @tap="toSearchHandle(item.keyword)">
							<text class="iconfont iconsearch"></text>
							<text>{{ item.keyword }}</text>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import musicHead from '@/components/music_head/music_head.vue';
import { getSearchHot, getSearchResultApi, getSearchSuggest } from '@/common/api.js';
export default {
	components: {
		musicHead
	},
	data() {
		return {
			// 热搜列表
			hotSearchList: [],
			// 搜索关键字
			searchKey: '',
			// 搜索历史
			searchHistory: [],
			// 显示页面切换
			showType: 1,
			// 聚焦输入框
			searchIpt: true,
			// 搜索结果列表
			searchResultList: [],
			// 搜索模糊提示列表
			suggestList: [],
			// 微信小程序胶囊按钮信息
			menuButtonInfo: {
				top: 20
			}
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		/* 获取微信小程序胶囊按钮信息 */
		this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// #endif
		/* 获取热搜列表 */
		getSearchHot().then(res => {
			console.log(res);
			if (res[1].data.code === 200) {
				this.hotSearchList = res[1].data.data;
				console.log(this.hotSearchList);
			}
		});
		/* 获取本地历史搜索记录 */
		uni.getStorage({
			key: 'searchHistory',
			success: res => {
				this.searchHistory = res.data;
			}
		});
	},
	methods: {
		/* 清除搜索关键字 */
		clearSearch() {
			this.searchKey = '';
			this.searchIpt = false;
			this.$nextTick(() => {
				this.searchIpt = true;
				this.showType = 1;
			});
		},
		/* 搜索框input事件 */
		searchInput() {
			if (this.searchKey == '') return (this.showType = 1);
			this.debounce(this.searchAssociate, 500);
		},
		/* 防抖 */
		debounce(fn, delay) {
			let time = null;
			if (time) {
				clearTimeout(time);
			}
			time = setTimeout(() => {
				fn();
			}, delay);
		},
		/* 输入框联想 */
		searchAssociate() {
			console.log(111);
			getSearchSuggest(this.searchKey).then(res => {
				this.showType = 3;
				this.suggestList = res[1].data.result.allMatch;
			});
		},
		/* 搜索按下回车事件 */
		toSearch() {
			this.searchHistory.unshift(this.searchKey);
			this.searchHistory = [...new Set(this.searchHistory)];
			if (this.searchHistory.length > 10) {
				this.searchHistory.pop();
			}
			uni.setStorage({
				key: 'searchHistory',
				data: this.searchHistory
			});
			this.getSearchResult(this.searchKey);
		},
		/* 点击关键词 获取搜索结果 */
		toSearchHandle(key) {
			this.searchKey = key;
			this.showType = 2;
			this.toSearch();
		},
		/* 删除历史记录 */
		clearHistory() {
			let _this = this;
			uni.showModal({
				title: '提示',
				content: '确认删除搜索记录吗',
				success: function(res) {
					if (res.confirm) {
						uni.removeStorage({
							key: 'searchHistory',
							success: res => {
								_this.searchHistory = [];
							}
						});
					}
				}
			});
		},
		/* 获取搜索结果 */
		getSearchResult(key) {
			getSearchResultApi(key).then(res => {
				console.log(res);
				if (res[1].data.code === 200) {
					this.searchResultList = res[1].data.result.songs;
					this.showType = 2;
					console.log(this.searchResultList);
				} else {
					uni.showToast({
						title: res[1].data.msg,
						success: res => {
							uni.navigateBack();
						}
					});
				}
			});
		},
		/* 搜索结果前往播放页 */
		toPlayMusic(id) {
			let ids = this.searchResultList.map(item => {
				return { id: item.id };
			});
			this.$store.commit('init_topListIds', ids);
			uni.navigateTo({
				url: `/pages/detail/detail?songId=${id}`
			});
		}
	}
};
</script>

<style lang="scss">
.search-search {
	display: flex;
	align-items: center;
	height: 70rpx;
	margin: 0 30rpx 30rpx;
	background-color: #f7f7f7;
	border-radius: 50rpx;
	text {
		font-size: 26rpx;
		margin-left: 28rpx;
		margin-right: 26rpx;
	}
	input {
		font-size: 28rpx;
		flex: 1;
	}
}

.search-history {
	margin: 0 30rpx;
	.history-head {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}

	.history-list {
		font-size: 26rpx;
		display: flex;
		flex-wrap: wrap;
		view {
			padding: 16rpx 28rpx;
			border-radius: 42rpx;
			margin-right: 28rpx;
			margin-bottom: 24rpx;
			background-color: #f7f7f7;
		}
	}
}

.search-hot {
	margin: 40rpx 30rpx;
	font-size: 30rpx;
	.hot-title {
		margin-bottom: 36rpx;
	}

	.hot-item {
		display: flex;
		align-items: center;
		margin-bottom: 58rpx;
		.hot-top {
			color: #fb2222;
			width: 60rpx;
			margin-left: 10rpx;
		}
		.hot-content {
			flex: 1;
			view:nth-child(1) {
				font-size: 30rpx;
				color: black;
			}
			view:nth-child(2) {
				font-size: 24rpx;
				color: #878787;
				width: 66vw;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			image {
				margin-left: 10rpx;
				width: 48rpx;
				height: 22rpx;
			}
		}

		.hot-count {
			color: #878787;
		}
	}
}

.search-result {
	border-top: 2rpx #e5e5e5 solid;
	padding: 30rpx;
	.result-item {
		display: flex;
		align-items: center;
		border-bottom: 2rpx #e5e5e5 solid;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		text {
			font-size: 50rpx;
		}
		.item-content {
			flex: 1;
			view:nth-child(1) {
				font-size: 30rpx;
				color: #3e6694;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}
			view:nth-child(2) {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				text {
					font-size: 24rpx;
				}
			}
		}
	}
}

.search-suggest {
	border-top: 2rpx #e5e5e5 solid;
	padding: 30rpx;
	font-size: 26rpx;
	.suggest-title {
		color: #537caa;
		margin-bottom: 40rpx;
	}
	.suggest-item {
		color: #666666;
		margin-bottom: 70rpx;
		display: flex;
		align-items: center;
		text:nth-child(1) {
			color: #c2c2c2;
			font-size: 26rpx;
			margin-right: 26rpx;
		}
		text:nth-child(2) {
			flex: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}
</style>
